<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>yukari world</title>
<script type="text/javascript" src='${rc.contextPath}/js/jquery-3.1.1.js'></script>
<script type="text/javascript" src='${rc.contextPath}/js/bootstrap.js'></script>
<link rel="stylesheet" type="text/css" href="${rc.contextPath}/css/bootstrap.css">
<link rel = "Shortcut Icon" href="${rc.contextPath}/images/timg.jpeg">
<style>
    body {
        background: #FCBFBF;
    }
    .content {
        width: 210px;
        margin: 0 auto; /*水平居中*/
        margin-top:10%;
    }
    .modal {
    	width: 210px;
 		margin: -250px 0 0 -105px;
    }
</style>
	
</head>
<body>
<div class="container-fluid">
	 <div id="content" class="content">
		<div id="content-main">
			<h3 style="text-align:center;">每日签到</h3>
			<hr/>
			<form method="post" id="sign_form">
			  <div class="form-row">
			    <label for="id_username" class="required">用户名：</label>
			    <input id="id_username" type="text" name="username" maxlength="30" />
			  </div>
			  <div class="form-row">
			    <label for="id_password" class="required">密码：</label> 
			    <input type="password" name="password" id="id_password" />
			  </div>
			  <div class="submit-row" style="text-align:right;">
			    <label>&nbsp;</label><a class="btn" id="registerBtn" href="javascript:register()"/>注册<a>
			    <a class="btn" id="signBtn" href="javascript:sign()"/>签到<a>
			  </div>
			</form> 
		</div>
    </div>
	<div class="row-fluid">
		<div class="span12">
			<div id="re" class="modal hide fade in" >
				<div class="modal-header">
					<button type="button" class="close" onclick="closeMessage()" >×</button>
					<h3 id="message_label">
					</h3>
				</div>
				<div class="modal-body">
					<p id="message_txt">
						账号或密码错误
					</p>
				</div>
				<div class="modal-footer">
                    <button class="btn" onclick="closeMessage()" >关闭</button>
                </div>
			</div>
		</div>
	</div>
</div>
<div id="backdrop" class="modal-backdrop hide fade in"></div>
</body>
<script>
	function showMessage(label,txt){
		$("#message_label").html(label);
		$("#message_txt").html(txt);
		$("#backdrop").show();
		$("#re").show();
	}
	function closeMessage(){
		$("#backdrop").hide();
		$("#re").hide();
	}
	function sign(){
		$("#registerBtn").prop("disabled",true);
		$.ajax({
			url : "${rc.contextPath}/auth/sign",
	    	dataType : "json",
	    	data :  $("#sign_form").serialize(),
	    	type:'post',
	    	success:function(json){
	    		if (json.code == 0){
	    			location.href = "${rc.contextPath}/auth/sign/success";
	    		}else {
	    			showMessage(json.message,json.data);
					$("#registerBtn").prop("disabled",false);
	    		}
	    	}
		});
	}
	function register(){
		location.href = "${rc.contextPath}/auth/register";
	}
</script>
</html>